<template>
  <Form
    :label-width="100"
    ref="formValidate"
    :rules="ruleValidate"
    :model="formValidate"
  >
    <FormItem label="消息标题" prop="title">
      <i-input
        type="text"
        v-model="formValidate.title"
        placeholder="消息标题"
      >
      </i-input>
    </FormItem>
    <FormItem label="消息内容" prop="content" class="ivu-form-item-required">
      <div id="editor"></div>
    </FormItem>

    <FormItem label="附件" v-if="type==1">
      <BaseUpload
        :action="action.uploadFile"
        :format="['jpg','jpeg','png','bmp','gif']"
        name="tempMFile"
        @onRemove="onRemove"
        @onSuccess="onSuccess"></BaseUpload>
    </FormItem>

    <FormItem>
      <Button v-if="type==1"
        type="primary"
        @click="handleSubmit('formValidate')"
      >确定
      </Button>
      <Button @click="publicReset('formValidate')" style="margin-left: 8px">取消</Button>
    </FormItem>
  </Form>
</template>

<script>
import { updateMixin } from '../../mixin'
import API_KEY from '../../api'
import { insert } from '../../api/modules/person/msgInside'
import EDITOR from 'wangeditor'
import message from '../../utils/message'
import { getTableDataByoPk } from '../../api/modules/table'

export default {
  name: 'MsgInsideForm',
  mixins: [updateMixin],
  props: {
    receiveUser: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 表单数据
      formValidate: {
        title: '',
        text: '',
        receiveUserList: [],
        fkAttachmentId: ''
      },
      // 表单校验规则
      ruleValidate: {
        title: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
        text: [{ required: false, message: '当前项不能为空', trigger: 'blur' }]
      },

      action: {
        uploadFile: API_KEY.fileLog.createFileLog,
        uploadWangEditorImg: API_KEY.fileLog.uploadWangEditorImg,
        getById: API_KEY.msgInside.def
      }

    }
  },
  mounted () {
    this.getEditor()
    this.formValidate.receiveUserList = []
    this.formValidate.receiveUserList.push(this.receiveUser)
    if (this.moduleId != null && this.moduleId !== -1) {
      this.getById()
    }
  },
  methods: {

    getEditor () {
      this.editor = new EDITOR('#editor')
      this.editor.customConfig.uploadImgServer = this.action.uploadWangEditorImg
      this.editor.customConfig.uploadFileName = 'file'
      this.editor.customConfig.menus = ['head', 'bold', 'fontSize', 'foreColor', 'backColor', 'link', 'justify', 'image', 'table', 'undo', 'redo']
      this.editor.create()
      this.editor.txt.html(this.formValidate.text)
    },
    getById () {
      getTableDataByoPk(this.action.getById, this.moduleId).then(({ data }) => {
        Object.keys(this.formValidate).forEach(item => {
          this.formValidate[item] = data[item]
        })
        this.editor.txt.html(this.formValidate.text)
      })
    },

    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.editor.txt.text() === '') {
            message.message.error('消息内容不允许为空')
            return false
          }
          this.formValidate.text = this.editor.txt.html()
          insert(this.formValidate).then(res => {
            message.message.success(res.message)
            this.$emit('closeView', 1)
          })
        }
      })
    },
    /**
       * 文件上传成功时触发
       * @param params
       */
    onSuccess (params) {
      const { response } = params
      this.formValidate.fkMainImageId = response.data.fileLogId
    },
    /**
       * 点击删除上传的列表时触发
       * @param params
       */
    onRemove (params) {
      this.formValidate.fkAttachmentId = ''
    }
  },
  components: {
    BaseUpload: () => import('@/components/view-ui/BaseUpload')
  }
}
</script>

<style scoped>

</style>
